<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>注册</title>
		<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css" />
		<style>
			form {
				margin-top: 100px;
			}
		</style>
		<script type="text/javascript" src="bootstrap-3.3.7-dist/js/jquery.js"></script>
		<script type="text/javascript" src="js/qs.js"></script>>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="js/axios.js"></script>
		<script type="text/javascript" src="js/common.js"></script>
		
	</head>
	<body>
		<div id="app">
			<form id="regist-form" class="form-horizontal col-md-offset-4 col-lg-offset-4col-xl-offset-4">
				<div class="form-group">
					<label class="col-sm-2 control-label">用户名</label>
					<div class="col-sm-3">
						<input type="text" class="form-control" placeholder="请输入应户名" name="userName" v-model="userName">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label">密码</label>
					<div class="col-sm-3">
						<input type="password" class="form-control" placeholder="请输入密码" name="userPwd"
							v-model="userPwd">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label">确认密码</label>
					<div class="col-sm-3">
						<input type="password" class="form-control" placeholder="请再次输入密码" name="userPwdConfirm"
							v-model="userPwdConfirm">
					</div>
				</div>
				<div class="form-group">
					<div class="col-sm-offset-3 col-sm-10">
						<button id="regist" type="button" class="btn btn-primary" @click="regist">注册</button>
					</div>
				</div>
			</form>
		</div>
	</body>
	<script>
		new Vue({
			el:"#app",
			data() {
				return {
					userName: "",
					userPwd: "",
					userPwdConfirm: ""
				}
			},
			methods: {
				regist() {
					let _this = this;
					let userName = _this.userName;
					let userPwd = _this.userPwd;
					let userPwdConfirm = _this.userPwdConfirm;
					//1.先进行前端校验
					if (userName.trim().length == 0) {
						alert("用户名不能为空");
						return;
					}
					if (userPwd.trim().length == 0 || userPwdConfirm.trim().length == 0) {
						alert("密码不能为空");
						return;
					}
					if (!/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$/.test(userPwd)) {
						alert("密码必须是强密码类型");
						return;
					}
					if (userPwd != userPwdConfirm) {
						alert("两次密码不一致");
						return;
					}
					//2.通过校验后进行注册操作
					axios.post("/users/regist", {
						userName: userName,
						userPwd: userPwd,
						userPwdConfirm: userPwdConfirm
					}, _this.formSubmitConfig).then(function(res){
						let data=res.data;
						if (data.success) {
							location.href = "login.html";
						} else {
							alert(data.errMsg);
						}
					});
				}
			}

		});
	</script>
</html>
